// 1 引入 lazy
import React, { Component, lazy, Suspense } from 'react';
import { BrowserRouter, Redirect, Route } from "react-router-dom";
import { connect } from "react-redux";
import { getCityNameCreate } from "./store/actionCreator";

// 2 修改 路由页面的引入方式 

const Tabbar = lazy(() => import("./pages/tabbar"));
const MapFound = lazy(() => import("./pages/mapFound"));
const CityList = lazy(() => import("./pages/cityList"));




// 3 指定一个组件 负责  懒加载过程中 给用户看到 等待提示 
const Loading = () => <div style={{ position: "fixed", width: "100vw", height: "100vh", backgroundColor: "#000", top: 0, left: 0 }} ></div>

class App extends Component {
  componentDidMount() {
    this.props.getCityName();
  }

  render() {
    return (
      <div>
        {this.props.cityName && <BrowserRouter>
          {/* 使用 4 Suspense  把路由都包起来 */}
          <Suspense fallback={<Loading />}>
            <Route path="/" exact >
              <Redirect to="/home/index" ></Redirect>
            </Route>
            <Route path="/home" component={Tabbar}  ></Route>
            <Route path="/cityList" component={CityList}  ></Route>
            <Route path="/mapFound" component={MapFound}  ></Route>
          </Suspense>
        </BrowserRouter >}
      </div>
    );
  }
}

// 映射对象 将仓库中的数据映射到  组件的属性中
const mapStateToProps = (state) => ({
  cityName: state.mapReducer.cityName
})

const mapDispatchToProps = (dispatch) => ({
  getCityName() {
    // 派发通知给管理员
    dispatch(getCityNameCreate())
  }
})


export default connect(mapStateToProps, mapDispatchToProps)(App);